<template>
  <div class="factory" v-loading="loading">
    <div class="factory-top">
      <div class="factory-top-left">
        <img src="../../assets/images/gc.png" alt="" style="width: 32px" />
        <el-select
          style="width: 280px"
          v-model="form.supplier_id"
          placeholder="请选择"
          @change="onChange"
          filterable
          clearable
        >
          <el-option label="全部工厂" value=""></el-option>
          <el-option
            v-for="item in factoryList"
            :key="item.supplier_id"
            :label="item.factory_name"
            :value="item.supplier_id"
          ></el-option>
        </el-select>
        <!-- <div>全部工厂</div>
        <div>
          <el-button type="text" size="default" @click="dialogVisibleGC = true"
            >更换加工厂<i class="el-icon-edit-outline"></i
          ></el-button>
        </div> -->
      </div>
      <div class="factory-top-right">
        <div class="factory-top-right-date">
          <span style="font-weight:400;font-size: 16px;">统计时间：</span> {{ form.str_date }}~{{ form.end_date }}
        </div>
        <div>
          <el-button type="primary" @click="dialogVisible = true"
            >自定义月份</el-button
          >
          <!-- <el-button type="" size="mini">自定义年度</el-button> -->
        </div>
      </div>
    </div>
    <div class="factory-data" v-if="form.supplier_id">
      <div class="factory-data-title">数据概览</div>
      <div class="factory-data-statistical">
        <div class="factory-data-statistical-div">
          <div class="factory-data-statistical-div-one">
            <div class="factory-data-statistical-div-one-title">
              本厂下单数/总下单数
            </div>
            <div class="factory-data-statistical-div-one-number">
              {{ datastatistics.ben_order_num || 0
              }}<span class="factory-data-statistical-div-one-number-span">
                / {{ datastatistics.zong_order_num || 0 }}</span
              >
            </div>
          </div>
          <div class="factory-data-statistical-div-percentage">
            <img src="../../assets/images/bing.png" alt="" />
            {{ (datastatistics.order_pro * 100).toFixed(2) || 0 }}%
          </div>
        </div>
        <div class="factory-data-statistical-div" style="margin-left: 60px">
          <div class="factory-data-statistical-div-one">
            <div class="factory-data-statistical-div-one-title">
              本厂入库数/总入库数
            </div>
            <div class="factory-data-statistical-div-one-number">
              {{ datastatistics.ben_ruku_num || 0
              }}<span class="factory-data-statistical-div-one-number-span">
                / {{ datastatistics.zong_ruku_num || 0 }}</span
              >
            </div>
          </div>
          <div class="factory-data-statistical-div-percentage">
            <img src="../../assets/images/bing.png" alt="" />
            {{ (datastatistics.ruku_pro * 100).toFixed(2) || 0 }}%
          </div>
        </div>
        <div class="factory-data-statistical-div" style="margin-left: 60px">
          <div class="factory-data-statistical-div-one">
            <div class="factory-data-statistical-div-one-title">
              已交付数/应交付数
            </div>
            <div class="factory-data-statistical-div-one-number">
              {{ datastatistics.yi_ruku_num || 0
              }}<span class="factory-data-statistical-div-one-number-span">
                / {{ datastatistics.yin_ruku_num || 0 }}</span
              >
            </div>
          </div>
          <div class="factory-data-statistical-div-percentage">
            <img src="../../assets/images/bing.png" alt="" />
            {{ (datastatistics.yin_ruku_pro * 100).toFixed(2) || 0 }}%
          </div>
        </div>
        <div class="factory-data-statistical-div" style="margin-left: 60px">
          <div class="factory-data-statistical-div-one">
            <div class="factory-data-statistical-div-one-title">
              本厂QC合格率/平均QC合格率
            </div>
            <div
              class="factory-data-statistical-div-one-number"
              style="color: red"
            >
              {{ (datastatistics.qc_rate * 100).toFixed(2) || 0 }}%
              <span style="font-weight: 400; font-size: 16px; color: #333"
                >/{{ (datastatistics.qc_average * 100).toFixed(2) || 0 }}%</span
              >
            </div>
          </div>
        </div>
        <div class="factory-data-statistical-div" style="margin-left: 60px">
          <div class="factory-data-statistical-div-one">
            <div class="factory-data-statistical-div-one-title">
              本厂仓检合格率/平均仓检合格率
            </div>
            <div
              class="factory-data-statistical-div-one-number"
              style="color: #67c23a"
            >
              {{ (datastatistics.qt_rate * 100).toFixed(2) || 0 }}%
              <span style="font-weight: 400; font-size: 18px; color: #333"
                >/{{ (datastatistics.qt_average * 100).toFixed(2) || 0 }}%</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="factory-data" v-else>
      <div class="factory-data-title">数据概览</div>
      <div class="factory-data-statistical">
        <div class="factory-data-statistical-div">
          <div class="factory-data-statistical-div-one">
            <div class="factory-data-statistical-div-one-title">总下单数</div>
            <div class="factory-data-statistical-div-one-number">
              {{ datastatistics.zong_order_num || 0 }}
            </div>
          </div>
        </div>
        <div class="factory-data-statistical-div" style="margin-left: 60px">
          <div class="factory-data-statistical-div-one">
            <div class="factory-data-statistical-div-one-title">总入库数</div>
            <div class="factory-data-statistical-div-one-number">
              {{ datastatistics.zong_ruku_num || 0 }}
            </div>
          </div>
        </div>
        <div class="factory-data-statistical-div" style="margin-left: 60px">
          <div class="factory-data-statistical-div-one">
            <div class="factory-data-statistical-div-one-title">
              已交付数/应交付数
            </div>
            <div class="factory-data-statistical-div-one-number">
              {{ datastatistics.yi_ruku_num || 0
              }}<span class="factory-data-statistical-div-one-number-span">
                / {{ datastatistics.yin_ruku_num || 0 }}</span
              >
            </div>
          </div>
          <div class="factory-data-statistical-div-percentage">
            <img src="../../assets/images/bing.png" alt="" />
            {{ (datastatistics.yin_ruku_pro * 100).toFixed(2) || 0 }}%
          </div>
        </div>
        <div class="factory-data-statistical-div" style="margin-left: 60px">
          <div class="factory-data-statistical-div-one">
            <div class="factory-data-statistical-div-one-title">
              平均QC合格率
            </div>
            <div class="factory-data-statistical-div-one-number">
              {{ (datastatistics.qc_average * 100).toFixed(2) || 0 }}%
            </div>
          </div>
        </div>
        <div class="factory-data-statistical-div" style="margin-left: 60px">
          <div class="factory-data-statistical-div-one">
            <div class="factory-data-statistical-div-one-title">
              平均仓检合格率
            </div>
            <div class="factory-data-statistical-div-one-number">
              {{ (datastatistics.qt_average * 100).toFixed(2) || 0 }}%
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="factory-number">
      <div class="factory-number-left">
        <div class="factory-number-left-title">
          <div class="line factory-number-left-title-text">下单数/入库数</div>
          <el-button
            class="factory-number-left-title-button"
            type=""
            size="mini"
            @click="onClickFactoryData"
            >工厂数据对比</el-button
          >
        </div>
        <div class="factory-number-left-charts">
          <div id="postponenum" class="echartsStyle"></div>
        </div>
      </div>
      <div class="factory-number-right">
        <div class="factory-number-right-title">
          <div class="line factory-number-right-title-text">
            下单数/入库数 TOP5
          </div>
          <el-radio-group v-model="radio1" size="mini">
            <el-radio-button label="下单数"></el-radio-button>
            <el-radio-button label="入库数"></el-radio-button>
          </el-radio-group>
        </div>
        <div>
          <el-table
            :data="datastatistics.order_toplist"
            style="width: 100%"
            v-if="radio1 == '下单数'"
          >
            <el-table-column prop="" label="排名" align="center" width="80">
              <template slot-scope="{ $index }">
                <img
                  v-if="$index == 0"
                  src="../../assets/images/1.png"
                  alt=""
                  style="width: 30px"
                />
                <img
                  v-else-if="$index == 1"
                  src="../../assets/images/2.png"
                  alt=""
                  style="width: 30px"
                />
                <img
                  v-else-if="$index == 2"
                  src="../../assets/images/3.png"
                  alt=""
                  style="width: 30px"
                />
                <div v-else>{{ $index + 1 }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="img" label="图片">
              <template slot-scope="{ row }">
                <el-image :src="row.img" fit="contain" style="width:60px;height:60px"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="product_name" label="款名">
            </el-table-column>
            <el-table-column prop="type_no" label="款号" width="180">
            </el-table-column>
            <el-table-column prop="countnum" label="下单数" align="right">
            </el-table-column>
          </el-table>
          <el-table
            :data="datastatistics.ruku_toplist"
            style="width: 100%"
            v-if="radio1 == '入库数'"
          >
          <el-table-column prop="" label="排名" align="center" width="80">
              <template slot-scope="{ $index }">
                <img
                  v-if="$index == 0"
                  src="../../assets/images/1.png"
                  alt=""
                  style="width: 30px"
                />
                <img
                  v-else-if="$index == 1"
                  src="../../assets/images/2.png"
                  alt=""
                  style="width: 30px"
                />
                <img
                  v-else-if="$index == 2"
                  src="../../assets/images/3.png"
                  alt=""
                  style="width: 30px"
                />
                <div v-else>{{ $index + 1 }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="img" label="图片">
              <template slot-scope="{ row }">
                <el-image :src="row.img" fit="contain" style="width:60px;height:60px"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="product_name" label="款名">
            </el-table-column>
            <el-table-column prop="type_no" label="款号" width="180">
            </el-table-column>
            <el-table-column prop="countnum" label="入库数" align="right">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog
      title="自定义月份"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="handleClose"
    >
      <el-date-picker
        style="width: 500px"
        v-model="value1"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        value-format="yyyy-MM"
      >
      </el-date-picker>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="onMonth"
          :disabled="!value1"
          :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- <el-dialog
      title="选择工厂"
      :visible.sync="dialogVisibleGC"
      width="900px"
      :before-close="handleClose"
    >
      <el-select
        v-model="form.supplier_id"
        placeholder="请选择"
        @change="onChange"
        filterable
        clearable
      >
        <el-option
          v-for="item in factoryList"
          :key="item.supplier_id"
          :label="item.factory_name"
          :value="item.supplier_id"
        ></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleGC = false">取 消</el-button>
        <el-button
          type="primary"
          @click="onSubmitFactory"
          :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  postAdminOperategetfactory_total,
  postHomeCodeGetFactory,
} from "@/api";
import { postponenum } from "./postponenum.js";
export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      dialogVisibleGC: false,
      datastatistics: "",
      radio1: "下单数",
      value1: "",
      form: {
        str_date: "",
        end_date: "",
        supplier_id: "",
      },
    };
  },
  async activated() {
    let date = new Date();
    let Y = date.getFullYear();
    let M = date.getMonth() + 1;
    if (M < 10) {
      M = "0" + M;
    }
    this.form.str_date = `${Y}-${M}`;
    this.form.end_date = `${Y}-${M}`;
    await this.postHomeCodeGetFactory();
    await this.postAdminOperategetfactory_total();
    await this.postponenum(postponenum(this.datastatistics));
  },
  methods: {
    onClickFactoryData(){
      this.$router.push({
        name:"FactoryContrast",
        query:{supplier_id:this.form.supplier_id}
      })
    },
    async postHomeCodeGetFactory() {
      let obj = {
        group: 1,
        page: 1,
        size: 1000,
        status: "0",
        type: "1",
      };
      let res = await postHomeCodeGetFactory(obj);
      this.factoryList = res.data;
    },
    async postponenum(data) {
      let myChart = echarts.init(document.getElementById("postponenum"));
      // 绘制图表
      myChart.setOption(data);
    },
    // 看板数据--统计
    async postAdminOperategetfactory_total() {
      this.loading = true;
      let { form } = this;
      await postAdminOperategetfactory_total(form).then((res) => {
        this.datastatistics = res.data;
      });
      this.loading = false;
    },
    async onMonth() {
      let { value1 } = this;
      this.form.str_date = value1[0];
      this.form.end_date = value1[1];
      await this.postAdminOperategetfactory_total();
      await this.postponenum(postponenum(this.datastatistics));
      this.value1 = "";
      this.dialogVisible = false;
    },
    async onChange() {
      await this.postAdminOperategetfactory_total();
      await this.postponenum(postponenum(this.datastatistics));
      this.dialogVisibleGC = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsStyle {
  width: calc(100% - 40px);
  height: 400px;
  background: #fff;
}
.factory {
  font-size: 12px;
  .factory-number {
    background: #ffffff;
    border-top: 1px solid #f0f1f7;
    padding: 10px 20px;
    display: flex;
    .factory-number-right {
      width: 600px;
      padding-left: 10px;

      .factory-number-right-title {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .factory-number-right-title-text {
          font-size: 18px;
          font-weight: 600;
        }
        .factory-number-right-title-button {
          margin-right: 10px;
        }
      }
    }
    .factory-number-left {
      width: calc(100% - 640px);
      border-right: 1px solid #f0f1f7;
      .factory-number-left-title {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .factory-number-left-title-text {
          font-size: 18px;
          font-weight: 600;
        }
        .factory-number-left-title-button {
          margin-right: 10px;
        }
      }
      .factory-number-left-charts {
        height: 400px;
      }
    }
  }
  .factory-data {
    background: #ffffff;
    border-top: 1px solid #f0f1f7;
    padding: 10px 20px;
    padding-bottom: 30px;
    .factory-data-title {
      font-size: 18px;
      font-weight: 600;
      padding: 10px 0;
    }
    .factory-data-statistical {
      display: flex;
      .factory-data-statistical-div {
        display: flex;
        align-items: center;
        margin-top: 5px;
        border-right: 1px solid #f0f1f7;
        padding-right: 60px;
        .factory-data-statistical-div-one {
          .factory-data-statistical-div-one-title {
            color: #666;
          }
          .factory-data-statistical-div-one-number {
            font-size: 20px;
            font-weight: 600;
            margin-top: 5px;
            .factory-data-statistical-div-one-number-span {
              font-weight: 400;
              font-size: 16px;
            }
          }
        }
        .factory-data-statistical-div-percentage {
          display: flex;
          align-items: center;
          margin-left: 10px;
          color: #2c70d6;
          font-weight: 600;
          font-size: 16px;
          > img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
          }
        }
      }
    }
  }
  .factory-top {
    background: #fff;
    padding: 10px 20px;
    display: flex;
    // justify-content: space-between;
    .factory-top-left {
      display: flex;
      align-items: center;
      > div:nth-child(2) {
        font-size: 18px;
        font-weight: 800;
        margin: 0 10px;
      }
      > div:nth-child(3) {
        margin-top: 8px;
      }
    }
    .factory-top-right {
      display: flex;
      align-items: center;
      margin-left:60px;
      .factory-top-right-date {
        margin-right: 20px;
        font-size:18px;
        font-weight: 600;
      }
    }
  }
}
</style>